<script>
/**
 * @description  这是一个弹出层，分两种模式，弹出框或者抽屉
 * 
 */
export default {
	name: 'modal',
	data() {
		return {
			modalWidth: 800,
			bodyStyle: {
				maxHeight: '450px',
				overflow: 'auto'
			}
		};
	},
	props: {
		visible: {
			type: Boolean,
			default: false
		},
		mode: {
			default: 'modal', //modal 弹出框模式，drawer 抽屉模式
			type: String
		},
		confirmLoading: {
			type: Boolean,
			default: false
		},
		title: {
			default: '新增',
			type: String
		},
		modalObj: {
			type: [Object, Array],
			default: () => {}
		}
	},
	methods: {
		/**
		 *
		 */
		handleOk() {
			console.log('确定');
			this.$emit('ok');
		},
		handleCancel() {
			console.log('关闭');
			this.$emit('cancel');
		},
		creatModal() {
			const { visible, modalWidth, bodyStyle } = this;
			const { modalObj } = this.$props;
			const { title, confirmLoading } = this.$props;
			return (
				<a-modal
					visible={visible}
					title={title}
					width={(modalObj&&modalObj.modalWidth) || modalWidth}
					bodyStyle={(modalObj&&modalObj.bodyStyle) || bodyStyle}
					confirmLoading={confirmLoading}
					destroyOnClose={true}
					maskClosable={true}
					onOk={this.handleOk}
					onCancel={this.handleCancel}
					
				>
					{this.$slots.default}
				</a-modal>
			);
		},
		creatDrawer() {
			const { visible, modalWidth, bodyStyle } = this;
			const { modalObj } = this.$props;
			const { title, confirmLoading } = this.$props;
			/* getContainer={()=>document.getElementById('app')} */
			return (
				<a-drawer
					visible={visible}
					title={title}
					width={(modalObj&&modalObj.modalWidth) || modalWidth}
					bodyStyle={(modalObj&&modalObj.bodyStyle) || bodyStyle}
					onClose={this.handleCancel}
					destroyOnClose={true}
					maskClosable={false}
					>
					{this.$slots.default}
					<div class="btnbar">
						<a-button style={{ marginRight: '8px' }} onClick={this.handleCancel}>
							取消
						</a-button>
						<a-button type="primary" onClick={this.handleOk}>
							确定
						</a-button>
					</div>
				</a-drawer>
			);
		}
	},
	render() {
		return this.mode == 'modal' ? this.creatModal() : this.creatDrawer();
	}
};
</script>
<style>
.btnbar {
	position: absolute;
	bottom: 0;
	width: 100%;
	border-top: 1px solid #e8e8e8;
	padding: 10px 16px;
	text-align: right;
	left: 0;
	background: #fff;
	borderradius: 0 0 4px 4px;
}
</style>
